<template>
	<view class="wanl-order-list">
		<!-- <view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)"> {{ item.text }} </view>
		</view> -->
		<view style="height: calc(100% - 60rpx)"  >
		

			<view v-if="list.length" class="tab-content" v-for="(tag, key) in list" :key="key">


				<!-- 订单列表 -->
				<view>
					<!-- 可使用优惠卷 -->
					<view class="title" style="color: black; display: block; margin-left: 5vw;font-size: 4vw;line-height: 3em;"
						v-if="list.length !== 0">可使用的优惠券(共 {{ list.length }} 张)</view>
					<view class="wanl-coupon" style=" display: flex;flex-direction: column;align-items: center;">
						<view style="margin-top: 2.66vw;
							 box-shadow: 0px 0px 0.8vw 0px #eee;
							 width: 90.4vw;height: 53.2vw;border-radius: 3.2vw;" class="nr" v-for="(coupon, seat) in list" :key="seat">
							<view :class="coupon.type" class="item margin-bj radius-bock" @tap="onDetails(coupon)">

								<view class="item-left">
									<block
										v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
										<view class="colour" style="color: #FF2525; font-size: 10.13vw;">
											<text class="text-price"></text>
											<text>{{ Number(coupon.price) }}</text>
										</view>
										<view>
											满{{ Number(coupon.limit) }}可用
										</view>
									</block>
									<block v-if="coupon.type == 'discount'">
										<view class=" colour" style="color: #FF2525; font-size: 8vw;">

											<text>{{ coupon.discount }}折</text>
										</view>
									</block>


									<block v-if="coupon.type == 'shipping'">
										<view class="colour">
											<text class="price">包邮</text>
										</view>
										<view class="cu-tag wanl-gray-dark radius text-sm">
											满{{ Number(coupon.limit) }}元包邮
										</view>
									</block>
								</view>
								<view class="item-right padding-bj">
									<view class="shop" @tap="onShop(coupon.shop_id)">

									</view>
									<view class="title">
										<!-- <view class="cu-tag sm radius margin-right-xs tagstyle">
												{{coupon.type_text}}
											</view> -->
										<text style="font-size: 4vw;font-weight: bold;color: black;" class="text-cut">{{ coupon.name
											}}</text>
									</view>
									<view class="content text-min" style="position: relative;">
										<view class="wanl-gray">
											<text style="color: #FF2525;">限app内购物使用</text>
											<block v-if="coupon.pretype == 'fixed'">
												<view>
													有效期至 {{ coupon.enddate }}
												</view>
											</block>
											<block v-if="coupon.pretype == 'appoint'">
												<view v-if="coupon.validity == 0">
													<text class="wlIcon-dot"></text>未使用前 永久 有效
												</view>
												<view v-else>
													<text class="wlIcon-dot"></text>领取后 {{ coupon.validity }} 天有效
												</view>
											</block>
										</view>
										<!-- 									<view class="cu-btn sm round line-colour" @tap.stop="onApply(coupon.id)"
												v-if="coupon.state">
												立即使用
											</view>
											<view class="cu-btn sm round" @tap.stop="onReceive(key,seat)" v-else>
												立即领取
											</view> -->
										<view class="toSee" style="position: absolute; width: 17.66vw; right: -3vw; height: 7.6vw;border: 0.5vw solid #ddd;
											border-radius: 5vw;
											display: flex;align-items: center;justify-content: center;padding: 2vw; color: black;">
											<text @tap=toIndex()>去逛逛</text>
										</view>
									</view>
								</view>
							</view>
							<view class="bottom"
								style="padding: 5vw 0 5vw 5vw; border-top: 0.1vw dotted  #eee; display: flex;font-weight: normal;">
								<view class="ztai" v-if="can">
									当前可用
								</view>
								<view class="ztai" v-else>
									当前不可用
								</view>
								<text
									style=" margin-left: 3vw; color: #9C9C9C; font-weight: normal;font-size: 2.93vw; ">商场特供猫粮品类^
									限新用户使用
								</text>
							</view>
						</view>

					</view>

					<!-- 不可使用优惠卷 -->
					<!-- <view class="title-no" style=" margin-left: 5vw;font-size: 4vw;line-height: 3em;"v-if="tag.cardList.length == 0">不可使用的优惠券(共 {{tag.cardList.length}} 张)</view> -->

				</view>


			</view>

			<view v-else>
				<!-- <text>123</text> -->
				<view class="no"
					style=" margin: 6.93vw 0; display: flex;flex-direction: column;align-items: center;padding: 100rpx 0;">
					<image style="width: 36.26vw;height: 25.33vw; " src="../../../static/images/user/wu.png" mode="">
					</image>
					<text style="color: #7B7B7B;">暂无可用优惠券</text>
				</view>
				<!-- 猜你喜欢 -->
				<view class="wanl-you-like"
					:style="{ backgroundImage: 'url(' + $wanlshop.appstc('/common/guess_you_like_it.png') + ')' }">
				</view>
				<wanl-product :dataList="likeData" />
				<uni-load-more :status="status" :content-text="contentText" />
				<view class="edgeInsetBottom"></view>
			
			</view>
<!-- 
			<uni-load-more :status="tag.loadingType" :content-text="contentText" />
			<view class="edgeInsetBottom"></view> -->

		</view>
	</view>

</template>

<script>
export default {
	data() {
		return {
			can: true,
			likeData: [],
			tabCurrentIndex: 0,
			status:"",
			list: [],
			navList: [{
				type: 'reduction',
				text: '满减券',
				loadingType: 'more',
				current_page: 1,
				cardList: []
			},
			{
				type: 'discount',
				text: '折扣券',
				loadingType: 'more',
				current_page: 1,
				cardList: []
			},
			{
				type: 'shipping',
				text: '包邮券',
				loadingType: 'more',
				current_page: 1,
				cardList: []
			}
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		};
	},
	onLoad(options) {
		// 优惠券列表
		this.loadData(1);

		// dolike
		this.loadlikeData();
		// console.log(options)
	},
	methods: {

		toIndex() {
			uni.reLaunch({
				url: "/pages/index"
			})
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		//获取订单列表
		async loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let type = navItem.type;
			console.log(source)
			// //判断是否最后一页
			// if (navItem.loadingType == 'noMore') {
			// 	return;
			// }
			//tab切换只有第一次需要加载数据
			// if (source === 'tabChange' && navItem.loaded === true) {
			// 	return;
			// }
			// //防止重复加载
			// if (navItem.loadingType === 'loading') {
			// 	return;
			// }
			// navItem.loadingType = 'loading';
			// 获取列表
			this.$api.get({
				url: '/wanlshop/coupon/getMyList',
				data: {
					// type: "",
					// page: navItem.current_page\

					state: source
				},
				success: res => {
					this.list = res.data
					
					console.log(this.list.length, res.data.length)
					navItem.current_page = res.current_page; //当前页码
					if (res.last_page === res.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					let cardList = res.data.filter(item => {
						item = Object.assign(item, {
							state: false
						});
						return item.type === type;
					});
					cardList.forEach(item => {
						navItem.cardList.push(item);
						console.log()
					});
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},
		// 领取优惠券
		async onReceive(key, seat) {
			let coupon = this.navList[key].cardList[seat];
			this.$api.post({
				url: '/wanlshop/coupon/receive',
				loadingTip: '领取中',
				data: {
					id: coupon.id
				},
				success: res => {
					coupon.id = res.id;
					coupon.state = true;
					this.$wanlshop.msg(res.msg);
					this.$store.commit('statistics/dynamic', {
						coupon: this.$store.state.statistics.dynamic.coupon + 1
					});
				}
			});
		},
		onApply(id) {
			this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
		},
		onDetails(data) {
			// this.$wanlshop.to(`/pages/user/coupon/details?data=${JSON.stringify(data)}`);
		},
		// onLoad() {

		// 	this.loadlikeData();
		// },

		// 滚动底部加载猜你喜欢
		async loadlikeData() {
			this.$api.get({
				url: '/wanlshop/product/likes?pages=user',
				data: {
					page: this.current_page
				},
				success: res => {
					this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = res.total == 0 ? 'noMore' : 'more';
				}
			});
		},
	}
};
</script>

<style>
page {
	height: 100%;
	background-color: #f6efe9;
}

.ztai {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2vw 1vw;
	border-radius: 1vw;
	height: 4vw;
	font-size: 3.2vw;
	color: #FF2525;
	font-weight: normal;
	border: 0.2vw solid #FF2525;
	margin-left: 4.266vw;
}
</style>